<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> -->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <!-- <link href="./css/layout.css" rel="stylesheet"> -->

    <!-- <script src="./js/custom-elem.js"></script> -->
    <style>
        * {
            font-family: 'Poppins', sans-serif;
        }

        input[type="submit"] {
            width: 100px;
            height: 50px;
            background-color: #393e46;
            border: 1px solid #393e46;
            color: #fff;
            position: absolute;
            top: 0;
            right: 0
        ;
        }

        input[type="submit"]:active {
            background-color: #f1f1f1;
            color: #393e46;
        }

        /* 模态框背景 */
        .modal-background {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        /* 模态框内容 */
        .modal-content {
            background-color: #fefefe;
            /*margin: 15% auto;*/
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 300px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* 模态框标题 */
        .modal-title {
            font-size: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>


<body>
<form action="">
    <h1>发布</h1>
    标题：
    <input type="text" required><br>
</form>
内容：
<div class="page-container" style="margin-top: 10px;">
    <div class="page-right">
        <!-- 编辑器 DOM -->
        <div style="border: 1px solid #ccc;">
            <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
            <div id="editor-text-area" style="height: 500px"></div>
        </div>

        <!-- 内容状态 -->
        <p style="background-color: #f1f1f1;">
            Text length: <span id="total-length"></span>；
            Selected text length: <span id="selected-length"></span>；
        </p>
    </div>
</div>
<input id="publishButton" type="submit" value="发布" onclick="getHtml()"/>
<!-- 模态框 -->
<div id="myModal" class="modal-background">
    <div class="modal-content">
        <div class="modal-title">发布成功！</div>
        <button id="closeModal">关闭</button>
    </div>
</div>
</body>
<%--<!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> -->--%>
<script src="./js/index.js"></script>
<script src="./js/jquery.min.js"></script>

<script>
    var modal = document.getElementById('myModal');
    var publishButton = document.getElementById('publishButton');
    var closeModal = document.getElementById('closeModal');


    publishButton.addEventListener('click', function () {
        if (document.getElementsByTagName("input")[0].value != ""){
            modal.style.display = 'block';
        }
    });

    closeModal.addEventListener('click', function () {
        modal.style.display = 'none';
    });

    // 点击模态框外部区域关闭模态框
    window.addEventListener('click', function (event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    });


    const E = window.wangEditor

    // 切换语言
    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG)

    window.editor = E.createEditor({
        selector: '#editor-text-area',
        html: '<p><br></p>',
        config: {
            placeholder: 'Type here...',
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'your-fileName',
                    base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
                }
            },
            onChange(editor) {
                console.log(editor.getHtml())

                // 选中文字
                const selectionText = editor.getSelectionText()
                document.getElementById('selected-length').innerHTML = selectionText.length
                // 全部文字
                const text = editor.getText().replace(/\n|\r/mg, '')
                document.getElementById('total-length').innerHTML = text.length
            }
        }
    })

    window.toolbar = E.createToolbar({
        editor,
        selector: '#editor-toolbar',
        config: {}
    })

    function getHtml() {
        var imgTagRegex = /<img[^>]*>/;//获取img标签的正则表达式
        // 获取编辑器内容
        var title = document.getElementsByTagName("input")[0].value;
        var editorContent = this.editor.getHtml();
        var userid = ${user.userId};
        var text = this.editor.getText();
        var picture = editorContent.match(imgTagRegex);


        if (title == "") {
            alert("请输入标题")
        } else {
            console.log(this.editor.getHtml());

            picture = picture ? picture[0] : "";

            // console.log("全部" + editorContent)
            // console.log("图片" + picture)

            // 发送AJAX请求到服务器
            $.ajax({
                type: "POST",
                url: "sendtodb.jsp", // 服务器端处理页面
                data: {
                    title: title,
                    content: editorContent,
                    userid: userid,
                    text: text,
                    picture: picture,
                },
            });
        }
    }
</script>
</html>